<template>
  <div class="row">
    <div class="col-md-12 cctop">
      <span>修改帖子</span>
    </div>
    <div class="col-md-12 middle">
      <el-input class="midInput" v-model="paperpicbyid.title"></el-input>
      <div class="midSelect">
        <el-select v-model="paperpicbyid.type" default-first-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="content" ref="editor" style="text-align:left"></div>
    <div class="col-md-12">
      <el-button class="btns" @click="handleAlert" type="primary">发布</el-button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import E from "wangeditor";
import {
  asyncossupload,
  asyncgettopicbyid,
  asyncupdatetopic
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
import OSS from "ali-oss";
export default {
  data() {
    return {
      data: "",
      paperpicbyid: {},
      editor: {},
      dataForm: {
        title: "",
        contenturl: "",
        type: "",
        txt: ""
      },
      options: [
        {
          value: "Scratch",
          label: "Scratch"
        },
        {
          value: "Micro:bit",
          label: "Micro:bit"
        },
        {
          value: "Arduino",
          label: "Arduino"
        },
        {
          value: "Python",
          label: "Python"
        },
        {
          value: "ROS",
          label: "ROS"
        },
        {
          value: "C/C++",
          label: "C/C++"
        },
        {
          value: "NOIP",
          label: "NOIP"
        }
      ]
    };
  },
  computed: mapGetters(["getuser"]),
  created() {
    if (!this.getuser) {
      location.href = '/'
    }
  },
  mounted() {
    this.editor = new E(this.$refs.editor);
    this.editor.customConfig.zIndex = 100;
    this.editor.customConfig.uploadImgShowBase64 = true;
    this.editor.customConfig.height = "500px";
    this.editor.customConfig.menus = [
      "head",
      "underline",
      "link",
      "list",
      "justify",
      "quote",
      "emoticon",
      "image",
      "code",
      "undo"
    ];
    this.editor.create();
    this.gettopicbyid();
  },
  methods: {
    getContent: function() {
      alert(this.content);
    },
    updataimage() {},
    async handleAlert() {
      this.paperpicbyid.txt = this.editor.txt
        .text()
        .replace(/\s+/g, "")
        .replace(/[\r\n]/g, "")
        .substr(0, 500);
      if (!this.paperpicbyid.txt) {
        this.$message.error("请填写一些内容");
      }
      const res = await asyncossupload();
      const client = new OSS({
        region: "oss-cn-qingdao",
        accessKeyId: res.accessKeyId,
        accessKeySecret: res.accessKeySecret,
        stsToken: res.securityToken,
        bucket: "cdn-hterobot"
      });
      const url = this.paperpicbyid.contenturl;
      const meat = "<meta charset=UTF-8>";
      let b = "<";
      const script = `<script src='https://cdn.hterobot.com/vue/public/js/postMessage.js'>${b}/script>`;
      const style = '<link href="/cdn.hterobot.com/vue/public/css/forum.css"  rel="stylesheet">'

      await client.put(
        url,
        new OSS.Buffer(meat +style+ script + this.editor.txt.html())
      );
      try {
        await asyncupdatetopic({
          ID: this.$route.params.id,
          title: this.paperpicbyid.title,
          txt: this.paperpicbyid.txt,
          type: this.paperpicbyid.type
        });
        this.$message("发布成功");
        this.$router.push("/");
      } catch (err) {
        this.$message("发布失败");
      }
    },
    gettopicbyid: function() {
      this.listLoading = true;
      asyncgettopicbyid({ ID: this.$route.params.id })
        .then(res => {
          this.paperpicbyid = res;
          console.log(this.paperpicbyid);
          var shlf = this;
          $.get(`https://cdn.hterobot.com/${res.contenturl}`, function(data) {
            shlf.editor.txt.html(data);
          });
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang='scss' scoped>
.cctop {
  height: 50px;
  line-height: 50px;
  padding-left: 24px;
  margin-bottom: 24px;
  border-radius: 6px;
  color: #666;
  background: #fff;
}
.middle {
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 6px;
  background: #fff;
}
.midInput {
  height: 40px;
  background: #fff;
}

.midSelect {
  margin: 24px 0;
  width: 130px;
  height: 24px;
  font-size: 12px;
}

.content {
  background: #fff;
  flex: 0 0 100%;
  max-width: 100%;
}
</style>